<script setup lang='ts'>
import { h, defineComponent, ref } from 'vue';
import type { INotificationProps } from './notification';

defineOptions({
  name: 'VtNotification',
})

const container = ref<HTMLElement | null>(null)

const props = defineProps<INotificationProps>()

const createComponents = () => {
  const vm = defineComponent({
    render() {
      if (typeof props.message === 'string') {
        return h('div', props.message)
      } else {
        return h('div', [props.message])
      }
    }
  })
  return vm
}

const renderMessage = createComponents()

function handleClose() {
  setTimeout(() => {
    props.close(container)
  }, props.duration)
}

if (props.duration !== 0) {
  handleClose()
}

</script>

<template>
  <div class='vt-notification__container' ref="container">
    <h2 class='vt-notification__title'>{{ title }}</h2>
    <renderMessage />
    <i v-if="showClose" @click="handleClose" class="vt-notification__close">x</i>
  </div>
</template>

<style scoped lang='scss'></style>